<template>
  <el-dialog
    append-to-body
    :visible.sync="visible"
    title="选择具体地址"
    @submit.native.prevent
    custom-class="xmgl-map-wrap"
  >
    <div class="content">
      <baidu-map
        class="bm-view"
        :center="center"
        :zoom="zoom"
        @ready="handler"
        @click="mapClick"
        ak="vwN8EK7HkDfecosEEuc63s09Qnn0W9dj"
      >
        <bm-marker :position="markerPoint" :dragging="true"></bm-marker>
      </baidu-map>
    </div>
  </el-dialog>
</template>

<script>
import { BaiduMap } from "vue-baidu-map/components";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
export default JBoot({
  props: {},
  components: { BaiduMap, BmMarker },
  data() {
    return {
      visible: false,
      center: { lng: 0, lat: 0 },
      markerPoint: { lng: 0, lat: 0 },
      zoom: 12,
      adddress:''
    };
  },
  methods: {
    handler({ BMap, map }) {
      this.zoom = 12;
      map.enableScrollWheelZoom(true);
      let _this = this;
      var geo = new BMap.Geolocation();
      geo.getCurrentPosition(r => {
        _this.center = { lng: r.point.lng, lat: r.point.lat };
       
        // _this.markerPoint= { lng: r.point.lng, lat: r.point.lat };
      });
    },
    mapClick(e) {
      var gc = new BMap.Geocoder();
      var point = new BMap.Point(e.point.lng, e.point.lat);
      gc.getLocation(point, res => {
        this.markerPoint = point;
        this.adddress = res.address
         this.visible = false
        this.$emit('mapClick',this.adddress)
      });
    }
  }
})
  .form()
  .build();
</script>

<style lang="scss">
.xmgl-map-wrap {
  .content {
    padding-bottom: 20px;
    .bm-view {
      width: 100%;
      height: 500px;
    }
  }
}
</style>
